<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="1" data-page-identification="x_hb0xe6o0k2">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_q2pj193dfc 自定义模板_7xu4mdl9mj -->
            <OverallProgress />
            <BatchesProgress />
            <PredictionProgress />
            <!-- end vid_q2pj193dfc 自定义模板_7xu4mdl9mj -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
import {
    h, ref, reactive, toRaw, markRaw, watch, computed,
    onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
} from "vue";
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
import { cloneDeep, localGet, merge, getDifferenceArray, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission, getComponentParamsValue } from '@/utils/index';
import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
import dayjs from 'dayjs';
import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
import { message, notification, Modal } from 'ant-design-vue'
import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate, parseSubFromDataList } from '@/utils/format';
import colorTheme from '@/design/custom-theme.json';
/*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/



    // 获取传入的流程ID和组件参数
const props = defineProps({
        'processInstanceId': {
            type: [String,Number,Boolean],
            default: undefined,
        },
        'message': {
            type: [String],
            default: '',
        },
        'projectId': {
            type: [String,Number],
            default: undefined,
        },
    })
const immediateWatch = (source, callback) => {
    watch(source, callback, {deep: true,immediate: true })
}



/* -------------------------- 属性定义 -------------------------- */

const setTimeOutList = [];
const pageLoading = reactive({
    loading: false,
    tip: undefined
});
const authInfo = localGet('app-user-store');




// 处理校验
const setSubFormName =(parentInfo, name)=>{
    return [parentInfo.parents, parentInfo.cycleIndex, name];
}


/* ========================== 属性定义 ========================== */


/* -------------------------- 元素数据引用 -------------------------- */


/* ========================== 元素数据引用 ========================== */


/* -------------------------- 页面数据 -------------------------- */


/* ========================== 页面数据 ========================== */



/* -------------------------- 响应 -------------------------- */

/* ========================== 响应 ========================== */


/* -------------------------- 函数 -------------------------- */

/* ========================== 函数 ========================== */


/* -------------------------- 页面参数 -------------------------- */

const pageParameter_state = reactive({
    'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
    'abc': undefined,
    'def': undefined,
})

/* ========================== 页面参数 ========================== */


/* -------------------------- 组件事件处理方法 -------------------------- */

// ---------------------------- 组件数据同步 ----------------------------

// ============================ 组件数据同步 ============================


/* ========================== 组件事件处理方法 ========================== */


/* -------------------------- 生命周期 -------------------------- */
// 用于参数变更后重新执行自定义指令
const queryUpdateFlag = ref(0);

const pageParams = [{"name":"abc","dataType":"STRING"},{"name":"def","dataType":"STRING"}];
let setPageParams = ()=>{
    pageParams.forEach(param => {
        strategyMap[param.dataType](param, route.query[param.name])
    })
}
const strategyMap = {
    STRING: (param, paramValue) => {
        if (typeof paramValue === 'undefined') {
            pageParameter_state[param.name] = undefined
            return
        }
        pageParameter_state[param.name] = paramValue;
    },
    BOOLEAN: (param, paramValue) => {
        if (typeof paramValue === 'undefined') {
            pageParameter_state[param.name] = undefined
            return
        }
        if('true' === (paramValue || '').toLowerCase()) {
            pageParameter_state[param.name] = true
        } else if('false' === (paramValue || '').toLowerCase()) {
            pageParameter_state[param.name] = false
        } else {
            message.error('参数传入错误！类型不匹配！');
        }
    },
    NUMBER: (param, paramValue) => {
        if (typeof paramValue === 'undefined') {
            pageParameter_state[param.name] = undefined
            return
        }
        if (!isNaN(paramValue)) {
            pageParameter_state[param.name] = Number(paramValue);
        } else {
            message.error('参数传入错误！类型不匹配！');
        }
    },
    ARRAY: (param, paramValue) => {
        if (typeof paramValue === 'undefined') {
            pageParameter_state[param.name] = undefined
            return
        }
        if (isNullOrUnDef(paramValue)  || !paramValue || paramValue=== 'undefined') {
            pageParameter_state[param.name] = [];
        } else if(paramValue.trim().startsWith('[') && paramValue.trim().endsWith(']')) {
            try {
                pageParameter_state[param.name] = JSON.parse(decodeURI(paramValue));
            } catch (error) {
                console.error('参数解析失败 ',error);
                message.error('参数解析失败 ',error);
            }
        } else {
            console.error('参数传入错误！类型不匹配！');
            message.error('参数传入错误！类型不匹配！');
        }
    },
};
/*** PUBLISH_EXEGESIS ***
 immediateWatch(
 () => route.query,
 () => {
 setPageParams();
 queryUpdateFlag.value++;

 }
 )
 *** PUBLISH_EXEGESIS ***/
onMounted(() => {setPageParams() ;

});

onUnmounted(() => {
    // 销毁定时器
    setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ?  clearInterval(timer): clearTimeout(timer);
    });
});

/* ========================== 生命周期 ========================== */


/* -------------------------- 数据关联处理 -------------------------- */





/* -------------------------- 表单数据同步 -------------------------- */
/* ========================== 表单数据同步 ========================== */

/* ========================== 数据关联处理 ========================== */


/* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

/* ========================== 不同组件自定义的处理逻辑 ========================== */


// ================================定制化逻辑========================================
import OverallProgress from './Page3000000998.vue'
import BatchesProgress from './Page3000000997.vue'
import PredictionProgress from './Page3000000999.vue'
</script>
<style lang="less" scoped>
.page_root {
    width: 100%;
    height: 100%;
    overflow: auto;
}
.page_root :deep(.@{ant-prefix}-spin-nested-loading),
.page_root :deep(.@{ant-prefix}-spin-container)
{
    height: 100%;
}
.page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper)
{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
}
.page_root :deep(.@{ant-prefix}-table)
{
    flex: auto;
    overflow: auto;
}
.table-moreBtn_down {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
}

.table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
    background: #ebf1ff;
}

/*  表格树结构样式处理，展开按钮层级增加*/
:deep(.@{ant-prefix}-table-row-expand-icon) {
    z-index: 1;
}
/*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
:deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 15px !important;
    width: calc(100% - 15px);
}
:deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 30px !important;
    width: calc(100% - 30px);
}
:deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 45px !important;
    width: calc(100% - 45px);
}
:deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 60px !important;
    width: calc(100% - 60px);
}

/* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
:deep(.@{ant-prefix}-transfer-list)
{
    height: 100%;
    width: 50%;
}
</style>
